<template>
  <a-select
    v-if="update"
    default-value="7日数据"
    class="select-wrap"
    @change="changeDate"
  >
    <a-select-option v-for="(item,index) in renderData" :key="index" :value="item.value">
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>

<script>
import eventBus from '@/utils/bus'
export default {
  name: 'Select',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      update: true,
      renderData: [
        { name: '7日数据', value: 7 },
        { name: '15日数据', value: 15 },
        { name: '30日数据', value: 30 }
      ]
    }
  },

  mounted() {
    eventBus.$on('resetSelect', target => {
      this.update = false
      this.$nextTick(() => {
        this.update = true
      })
    })
  },
  beforeDestroy() {
    eventBus.$off('resetSelect')
  },
  methods: {
    changeDate(val) {
      console.log(this.params, 'this.params')
      eventBus.$emit('selectChange', { value: val, id: this.id })
    }
  }
}
</script>

<style scoped lang="less">
.select-wrap{
  margin-left:0.1rem;
::v-deep .ant-select-selection{
  background-color: transparent;
  color: rgb(205,139,12);
  font-size: 0.12rem;
  font-weight: 800;
  border: 1px solid rgb(205,139,12);
}
::v-deep .ant-select-selection--single{
  height: 0.25rem;
}
::v-deep .ant-select-selection__rendered{
  line-height: 0.25rem;
}
::v-deep .ant-select-selection::after{
  content: '';
  border-right:0.06rem  solid transparent;
  border-left:0.06rem solid transparent;
  border-top:0.06rem solid rgb(203,135,12);
  position: absolute;
  right: 0.05rem;
  top: 40%;
}
//::v-deep .ant-select-selection::before{
//  content: '';
//  width:0.04rem;
//  height:100%;
//  position: absolute;
//  left: -0.1rem;
//  top: 0;
//  background: linear-gradient(30deg,rgb(96,148,234),rgb(144,114,204));;
//}
}
</style>
